<!--
 * @Author: chunlai
 * @Date: 2024-11-19 09:07:52
 * @LastEditTime: 2024-11-19 09:53:53
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \01.latest-short-insure\src\views\multipages\netques.vue
 * @Description: 互联网险种---评估问卷
-->
<template>
  <div class="insure_gz_page">
    <div class="bgf pd14">
      <h3 class="tc">特别提示</h3>
      <p>尊敬的客户：</p>
      <p class="p_2em">
        为保护您的合法权益，向您提供合适的保险产品及更好的服务，根据《互联网保险业务监管办法》《关于进一步规范保险机构互联网人身保险业务有关事项的通知》等规定，本公司特意设置本问卷，旨在了解您可承受的风险程度，并在此和您提供的相关信息及证明资料基础上，协助您选择合适的产品或服务，以符合您的风险承受能力。因此需您如实填写本问卷，并对所提供的信息和证明材料的真实性、准确性、完整性负责。
      </p>
      <p class="p_2em">
        此评估仅供购买保险产品参考之用，其内容并未包括所有影响保险购买能力的因素。
      </p>
      <p class="p_2em">
        <strong>特别提醒：</strong
        >本公司履行风险承受能力评估等适当性职责，并不能取代您自己购买产品和选择相关服务的判断，也不会降低产品或服务的固有风险。同时与产品或服务相关的风险、履约责任以及费用等将由您自行承担。
      </p>
      <p class="p_2em">
        如选择了和自己保险需求、交费能力或风险承受能力不相符的保险产品，可能会出现以下情况，造成您的损失：1.因经济原因，在保险合同期满前退保，产生退保损失；2.不能按期缴费，导致保险合同失效；3.保险责任与您的需求不匹配，无法提供您所需的保障或收益。
      </p>
    </div>
    <div class="bgf pd14">
      <h3 class="tc">评估问卷</h3>
      <ul class="mt14">
        <li class="mt14" v-for="(item, index) in quesList" :key="`que${index}`">
          <p class="que-tt">{{ item.name }}</p>
          <div class="li_div" :class="item.style ? item.style : ''">
            <span
              class="li_div_span"
              :class="{ active: item.value === ele.value }"
              @click="checkItem(index, ele)"
              v-for="(ele, idx) in item.selects"
              :key="`que-select${idx}`"
            >
              {{ ele.label }}
            </span>
          </div>
        </li>
      </ul>
    </div>
    <div class="bgf pd14 mt14">
      <h3 class="tc">投保声明</h3>
      <p class="mt14 lh2">
        本人已阅读并充分理解此问卷的询问内容和含义，且已如实回答，理解此问卷所揭示的风险，在投保时已充分了解所投保保险产品情况，并自愿承担保单利益不确定性的风险。
      </p>
    </div>
    <FooterBtns rightText="下一步" btnNum="1" @saveForm="goNextStep" />
  </div>
</template>

<script>
export default {
  name: "InsureGaoZhi",
  components: {},
  data() {
    return {
      quesList: [
        {
          id: "1",
          name: "1.您的年龄是（周岁）",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "18-25",
              value: "a",
              isPass: "1",
            },
            {
              label: "26-50",
              value: "b",
              isPass: "1",
            },
            {
              label: "51-80",
              value: "c",
              isPass: "1",
            },
            {
              label: "高于80岁",
              value: "d",
              isPass: "2",
            },
          ],
        },
        {
          id: "2",
          name: "2.您的保费预算占家庭年收入的比重为",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "不超过家庭年收入的10% ",
              value: "a",
              isPass: "1",
            },
            {
              label: "家庭年收入的10%-30%",
              value: "b",
              isPass: "1",
            },
            {
              label: "超过家庭年收入的30% ",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "3",
          name: "3.您是否可以自主完成在线投保及使用在线服务等功能？",
          value: "",
          isPass: "2",
          style: "row",
          selects: [
            {
              label: "可以",
              value: "a",
              isPass: "1",
            },
            {
              label: "不可以",
              value: "b",
              isPass: "2",
            },
          ],
        },
        {
          id: "4",
          name: "4.您是否能够独立阅读保险条款并理解保险责任？",
          value: "",
          isPass: "2",
          style: "row",
          selects: [
            {
              label: "可以",
              value: "a",
              isPass: "1",
            },
            {
              label: "不可以",
              value: "b",
              isPass: "2",
            },
          ],
        },
        {
          id: "5",
          name: "5.您打算购买保险的主要原因？",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "增加一份保障，防范风险。",
              value: "a",
              isPass: "1",
            },
            {
              label: "期望获得一定收益。",
              value: "b",
              isPass: "1",
            },
            {
              label: "没有明确概念。",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "6",
          name: "6.您购买保险的资金来源及用途？",
          value: "",
          isPass: "2",
          selects: [
            {
              label: "闲置资金，专项用于保险，不考虑其他用途。",
              value: "a",
              isPass: "1",
            },
            {
              label: "闲置资金的一部分，不排除在保险期满前提前退保的情况发生。",
              value: "b",
              isPass: "1",
            },
            {
              label: "非闲置资金，购买保险的资金随时都可能要用于其他用途。",
              value: "c",
              isPass: "2",
            },
          ],
        },
        {
          id: "7",
          name: "7.您是否了解犹豫期的规则并能接受犹豫期后退保可能造成的损失？",
          value: "",
          isPass: "2",
          selects: [
            {
              label:
                "清楚，在犹豫期内可全额退保，超出犹豫期后退保可能会产生损失。",
              value: "a",
              isPass: "1",
            },
            {
              label:
                "不清楚，但可以接受因犹豫期后退保导致所交保费不能全额返还的情况。",
              value: "b",
              isPass: "1",
            },
            {
              label:
                "不清楚，且不能接受因犹豫期后退保导致所交保费不能全额返还的情况。",
              value: "c",
              isPass: "2",
            },
          ],
        },
      ],
      pageLoad: false,
    };
  },
  computed: {},
  watch: {
    quesList: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$setMessage("quesListSes", val);
        }
      },
      deep: true,
    },
  },
  created() {
    document.title = "互联网保险适当性评估问卷";
    if (this.$getMessage("quesListSes")) {
      this.quesList = this.$getMessage("quesListSes");
    }
    // 最大年龄设置
    let ageMax = "70";
    const cache = this.$getMessage("infoReg") || {},
      ageCache = cache.ageRange || {},
      ageBbr = ageCache.insured || {};
    if (ageBbr && ageBbr.maxAge && ageBbr.maxAge > 70) {
      ageMax = `${ageBbr.maxAge}`;
    }
    this.quesList[0].selects[2].label = `51-${ageMax}`;
    this.quesList[0].selects[3].label = `高于${ageMax}岁`;
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  mounted() {},
  methods: {
    checkItem(index, ele) {
      this.$set(this.quesList[index], "value", ele.value);
      this.$set(this.quesList[index], "isPass", ele.isPass);
    },
    goNextStep() {
      let nextStepOk = true,
        errTip = "";
      const len = this.quesList.length;
      for (let i = 0; i < len; i++) {
        const item = this.quesList[i];
        if (item.value === "") {
          errTip = `第${item.id}题未填写,请全部完成后提交`;
          break;
        }
        if (item.isPass === "2") {
          nextStepOk = false;
          errTip =
            "您未通过互联网保险适当性评估，当前不适宜作为投保人在线购买本产品。";
          break;
        }
      }
      if (!nextStepOk) {
        this.$dialog
          .alert({
            title: "提示",
            message: errTip,
            confirmButtonColor: "#DA251E",
          })
          .then(() => {});
        return;
      }
      if (errTip) {
        this.$toast(errTip);
        return;
      }
      this.$router.push("/form");
    },
  },
};
</script>
<style lang="less" scoped>
.insure_gz_page {
  background-color: rgb(246, 246, 246);
}

.que-tt {
  line-height: 1.5;
  margin-bottom: 10px;
}

.pd14 {
  padding: 14px;
}

.tc {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.p_2em {
  text-indent: 2em;
}

.bgf {
  background-color: #fff;
}

.mt14 {
  margin-top: 14px;
}

.lh2 {
  line-height: 2;
}

.lh3 {
  line-height: 3;
}

.li_div {
  display: flex;
  flex-direction: column;

  .li_div_span {
    display: flex;
    align-self: baseline;
    min-height: 36px;
    padding: 10px 14px;
    color: #2b2d30;
    background-color: #eaebee;
    border-radius: 36px;

    &:not(:last-child) {
      margin-bottom: 10px;
    }

    &.active {
      color: #fff;
      background-color: #d44438;
    }
  }

  &.row {
    flex-direction: row;

    .li_div_span {
      margin-right: 10px;
    }
  }
}
</style>
